<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">


    <title>Hello, world!</title>

    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        #app {
            width: 100%;
            height: 100%;

            min-width: 900px;
            min-height: 500px;

            overflow: auto; /*超出范围自动产生滚动条*/

            display: flex; /* 定义本元素（#app）是一个flex（柔性布局/灵活布局）盒子  */
            flex-direction: row; /*内部元素按行排列*/

        }

        .nav {
            height: 100%;

            overflow: hidden; /*超出范围隐藏*/
            transition: width 0.5s;

            box-shadow: rgba(0, 0, 0, 0.1) 1px 0px 1px;

            display: flex;
            flex-direction: column;
        }

        .main {
            height: 100%;
            flex: auto; /*本元素做为flex容器中的元素，以自动扩展占位*/

            display: flex;
            flex-direction: column;

        }

        .title {
            width: 100%;
            height: 50px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;

            position: relative; /*这样设置，将做为子元素的定位基准*/
        }

        .curruser {
            position: absolute; /*相对于父元素定位*/
            right: 20px;
            bottom: 5px;

            display: flex;
            flex-direction: row; /*主轴为水平方向*/
            align-items: center; /*交叉轴居中对齐*/

        }

        .content {
            padding: 5px;
            width: 100%;
            flex: auto;
        }

        .bottom {
            width: 100%;
            height: 30px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 1px;
        }

        .main-menu:hover { /*鼠标悬浮时的样式*/
            color: white;
            background-color: slateblue;
        }

    </style>


</head>
<body>

<div id="app">

    <div class="nav" :style="{width:navWidth+'px'}">
        <div style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px;">
            <img src="images/logo.png" style="height:50px;"/>
        </div>

        <!-- 导航菜单 -->
        <div class="accordion" id="accordionExample">


            <!--            <div style="margin-top:10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 1px;border-radius: 10px; ">-->

            <ul class="nav flex-column">
                <li class="nav-item">
                    <a href="manager/Borrowing_card.html" target="contentFrame"
                       class="list-group-item list-group-item-action" id="default"
                       style="border:none;">借阅卡</a>
                </li>
                </li>
                <div class="main-menu" data-toggle="collapse" data-target="#collapseOne" id="headingOne"
                     style="border-radius: 10px;cursor: pointer;padding:5px 0px 5px 15px">
                    缓期归还管理
                </div>

                <div class="list-group collapse " id="collapseOne" data-parent="#accordionExample">
                    <a href="defer/new.html" target="contentFrame" class="list-group-item list-group-item-action "
                       style="border:none"> 新增申请 </a>
                    <a href="defer/history.html" target="contentFrame" class="list-group-item list-group-item-action "
                       style="border:none"> 历史申请 </a>
                </div>

                <li class="nav-item">
                    <a href="book/Book.html" target="contentFrame"
                       class="list-group-item list-group-item-action" id="book"
                       style="border:none;">图书管理</a>
                </li>
                <li class="nav-item">
                    <a href="student/Student.html" target="contentFrame"
                       class="list-group-item list-group-item-action" id="student"
                       style="border:none;">学生管理</a>
                </li>
            </ul>


        </div>


    </div>
    <div class="main">
        <div class="title">


            <i @click="switchNavWidth" class="fa fa-bars fa-2x"
               style="color:#CCCCCC;margin:12px 0px 0px 10px;cursor: pointer;"></i>

            <div class="curruser">

                <div class="dropdown" style="margin-left:20px;">
                    <div class="dropdown-toggle" data-toggle="dropdown">
                        {{currentUser.userName}}（{{currentUser.userId}}）
                    </div>
                    <div class="dropdown-menu" style="margin-top:15px;">
                        <a class="dropdown-item" href="#" @click.prevent="info">个人信息</a>
                        <a class="dropdown-item" href="#" @click.prevent="changePassword">密码修改</a>
                        <a class="dropdown-item" href="#" @click.prevent="exit">退出系统</a>
                    </div>
                </div>
            </div>

        </div>
        <div class="content">
            <iframe name="contentFrame" style="width:100%;height:100%;border:none;"></iframe>
        </div>
        <div class="bottom"></div>
    </div>


    <div id="upload-avatar" style="display: none;padding:10px;">

        <div @click="chooseAvatar">

            <div v-if="currentFile"
                 style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;">
                <img :src="currentImgUrl" style="max-width:100%;max-height: 100%;"/>
            </div>

            <div v-else
                 style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;border:1px dashed #AAAAAA;">
                <i class="fa fa-plus fa-3x" style="color:#AAAAAA;"></i>
                <div style="font-size:26px;">上传头像</div>
            </div>


        </div>

        <button :disabled="currentFile==null" class="btn btn-primary btn-lg" style="width:100%;margin-top:10px;"
                @click="uploadAvatar">上传头像
        </button>


    </div>

    <input v-show="false" type="file" ref="fileInput" @change="handleFile"/>

    <!-- 个人信息窗口 -->
    <div id="add-win" style="display:none;padding:15px;">

        <form>
            <div class="form-group">
                <label>id</label>
                <input type="text" class="form-control" v-model="currentUser.userId" disabled>
            </div>
            <div class="form-group">
                <label>姓名</label>
                <input type="text" class="form-control" v-model="currentUser.userName">
            </div>

            <div class="form-group">
                <label>性别</label>
                <input type="text" class="form-control" v-model="currentUser.sex">
            </div>
            <div class="form-group">
                <label>电话</label>
                <input type="text" class="form-control" v-model="currentUser.phone">
            </div>
            <div class="form-group">
                <label>邮箱</label>
                <input type="text" class="form-control" v-model="currentUser.email">
            </div>

            <button type="button" class="btn btn-primary" @click="execUpd">提交</button>
        </form>
    </div>

    <!-- 修改密码窗口 -->
    <div id="password-win" style="display:none;padding:15px;">

        <form>
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" v-model="currentUser.userId" style="display: none">
                <input type="text" class="form-control" v-model="currentUser.userName" disabled>
            </div>
            <div class="form-group">
                <label>旧密码</label>
                <input type="password" class="form-control" v-model="password.old">
            </div>

            <div class="form-group">
                <label>新密码</label>
                <input type="password" class="form-control" v-model="password.new">
            </div>
            <button type="button" class="btn btn-primary" @click="execUpdPassword">提交</button>
        </form>
    </div>


</div>


<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>

<script>


    //定义vue应用配置
    const app = {
        //data函数专门用来定义数据
        data() {
            return {

                navWidth: 180,

                currentUser: {},//当前用户信息
                password:{},//存储新旧密码
                currentFile: null,//当前图片文件
                currentImgUrl: null,//当前图片路径

                updData: {
                    ma_id:'',
                    ma_name:'',
                    ma_sex:'',
                    ma_phone:'',
                    ma_mail:''
                },
                updIdx:null,
                page:{}

            };
        },

        //定义方法
        methods: {
            //切换导航栏的宽度
            switchNavWidth() {
                this.navWidth = this.navWidth == 180 ? 0 : 180;
            },

            getCurrentUser() {
                myAxios.get('/Mcurrent-user').then(res => {
                    this.currentUser = res.data.data;
                    console.log("当前用户：", this.currentUser);
                });
            },

            //打开上传的弹框
            openUploadWin() {
                layer.open({
                    type: 1,
                    title: false,
                    content: $('#upload-avatar')
                });
            },

            //选择头像
            chooseAvatar() {
                this.$refs.fileInput.click();//通过程序点击文件框
            },
            //选择图片文件后处理图片文件
            handleFile() {
                this.currentFile = this.$refs.fileInput.files[0];//获得选中的图片文件

                let fileReader = new FileReader();
                fileReader.onload = () => {//读取文件完成事件
                    this.currentImgUrl = fileReader.result;//将加载结果（将文件转变为可访问的url）赋值与currentImgUrl
                };
                fileReader.readAsDataURL(this.currentFile);//读取文件并转化为url
            },

            //上传头像
            uploadAvatar() {
                let idx = layer.load();
                let formData = new FormData();
                formData.append("avatar", this.currentFile);//"avatar"是参数名

                myAxios.post("/Mavatar", formData).then(res => {
                    layer.close(idx);
                    if (res.data.success) {
                        this.getCurrentUser();
                        layer.msg('上传成功！', {icon: 1});
                        this.currentFile = null;
                        this.currentImgUrl = null;
                    } else {
                        layer.msg(res.data.message, {icon: 2});
                    }
                }).catch(err => {
                    layer.close(idx);
                })
            },

            //个人信息
            info(){

                console.log(JSON.stringify(this.currentUser))
                this.updIdx = layer.open({
                    type: 1,
                    title: '修改个人信息',
                    area: ['800px', '600px'],
                    content: $('#add-win')
                });
                console.log("修改layer",this.updIdx)
            },
            //更新个人信息
            execUpd() {
                const idx = layer.load();
                myAxios.post('/MdoUpd', this.currentUser).then(res => {
                    layer.close(idx);
                    if (res.data.success) {
                        // this.getBobcardList();
                        // this.goPage(this.page.current);
                        console.log(this.updIdx);
                        layer.close(this.updIdx);
                        layer.msg('用户信息成功！', {icon: 1});
                    } else {
                        layer.msg(res.data.message, {icon: 2}
                        );
                    }
                }).catch(err => {
                    console.log(err)
                    layer.close(idx);
                    layer.msg('修改用户信息失败！', {icon: 2});
                });
            },

            //修改密码
            changePassword(){

                console.log(JSON.stringify(this.currentUser))
                this.updIdx = layer.open({
                    type: 1,
                    title: '修改密码',
                    area: ['800px', '450px'],
                    content: $('#password-win')
                });
                console.log("修改layer",this.updIdx)
            },
            //更新密码
            execUpdPassword() {
                console.log(this.password)
                if(this.password.old===''||this.password.old===undefined){
                    layer.msg('请输入旧密码！', {icon: 2});
                    return;
                }
                if(this.password.new===''||this.password.new===undefined){
                    layer.msg('新密码不能为空！', {icon: 2});
                    return;
                }
                this.password.id=this.currentUser.userId;
                console.log(this.password)
                const idx = layer.load();
                myAxios.post('/MdoUpdPassword', this.password).then(res => {
                    layer.close(idx);
                    if (res.data.success) {
                        layer.close(this.updIdx);
                        layer.msg('修改密码成功！', {icon: 1});
                        this.password={};
                    } else {
                        layer.msg(res.data.message, {icon: 2}
                        );
                    }
                }).catch(err => {
                    layer.close(idx);
                    layer.msg('修改密码失败！', {icon: 2});
                });
            },

            //退出系统
            exit() {
                this.loadIdx = layer.load();
                myAxios.post('/Mexit').then(res => {
                    layer.close(this.addIdx)
                    if (res.data.success) {
                        layer.msg('您已成功退出系统！请重新登录。', {icon: 1}, () => {
                            window.location.href = "login.html"
                        });
                    } else {
                        layer.msg('退出失败！', {icon: 2});
                    }
                }).catch(err => {
                    layer.close(this.addIdx)
                    layer.msg('系统错误！请与管理员联系。', {icon: 2});
                });
            }

        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
        mounted() {
            this.getCurrentUser();//调用获取用户信息的方法
            document.getElementById("default").click();

        }
    };

    Vue.createApp(app).mount('#app')

</script>


</body>
</html>